<template>
  <current>
    <div class="common-container center-container">
      <div class="common-header"><h3 class="common-header-title">研究中心</h3></div>
      <div class="common-content">
        <div class="common-card">
          <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
            <el-form-item label="选择要加入的研究中心" prop="oid">
              <select-form
                v-model="form.oid"
                :options="orgOptions"
                :multiple="true"
                :default-props="{ label: 'name', value: 'oid' }"
              />
            </el-form-item>
            <el-row>
              <el-col :span="11">
                <el-form-item label="计划收集例数" prop="gatherPlan">
                  <el-input-number
                    v-model="form.gatherPlan"
                    :step="1"
                    :min="0"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="2" />
              <el-col :span="11">
                <el-form-item label="收集终止时间" prop="expTime">
                  <el-date-picker
                    v-model="form.expTime"
                    type="date"
                    placeholder="请选择"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item>
              <el-button type="primary" :loading="addLoading" @click="add">{{
                addLoading ? '' : '添加'
              }}</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div v-loading="tableLoading" class="org-member">
          <h4>现有研究中心</h4>
          <div class="common-card">
            <div class="card-title">
              <span class="bold">中心</span>
              <span class="total-num">{{ pageObj.total }}</span>
            </div>
            <template v-if="tableData.length > 0">
              <ul class="member-list">
                <li v-for="data in tableData" :key="data.id">
                  <div class="org-info">
                    <div>
                      <span class="name">{{ data.name }}</span>
                      <!-- <router-link
                        class="name"
                        :to="{
                          path: '/project/setting/general',
                          query: {
                            pid: data.oid,
                            pname: data.name,
                          },
                        }"
                        >{{ data.name }}</router-link
                      > -->
                      <span>{{ data.gatherPlan }}</span>
                    </div>
                    <div class="time">{{ formatTime(data.intTime, data.expTime) }}</div>
                  </div>
                  <div class="right-operator">
                    <el-button type="danger" size="small" :icon="Delete" @click="delOrg(data.id)" />
                  </div>
                </li>
              </ul>

              <pagination
                v-model:currentPage="pageObj.pageNum"
                v-model:pageSize="pageObj.pageSize"
                :total="pageObj.total"
                @pagination="getProjectOrgList"
              />
            </template>
            <el-empty v-else description="暂无数据" :image-size="200" />
          </div>
        </div>
      </div>
    </div>
  </current>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs } from 'vue'
import { useRoute } from 'vue-router'

import { Delete } from '@element-plus/icons-vue'

import SelectForm from '@/components/Form/Select.vue'
import Current from '../../current/index.vue'

import OrgApi from '@/api/backend/orgination'
import ProjectApi from '@/api/project'
import StationApi from '@/api/project/station'

import { parseTime } from '@/utils/time'

import { commonHandle, Pagination } from '@/views/mixins/common'
import IBaseObj from '#/index'
import type { FormInstance } from 'element-plus'

const { pid } = useRoute().query

const { state, handleSearch, handleDelete } = commonHandle()

const { pageObj, tableData, tableLoading }: IBaseObj = toRefs(state)

const form = reactive({
  oid: [],
  gatherPlan: 1,
  expTime: '',
})
const rules = {
  oid: [{ required: true, message: '请选择要加入的研究中心', trigger: 'change' }],
  gatherPlan: [{ required: true, message: '请输入计划收集例数', trigger: 'change' }],
}
const formRef = ref<FormInstance>()
const orgOptions = ref<IBaseObj[]>([])
const addLoading = ref(false)

const getOrgData = async () => {
  orgOptions.value = (await OrgApi.getOrgList()) || []
}

getOrgData()

const add = () => {
  formRef.value?.validate(async (valid) => {
    if (valid) {
      addLoading.value = true
      try {
        console.log(form)
        const params: IBaseObj[] = []
        form.oid.forEach((oid: string | number) => {
          params.push({
            oid,
            pid,
            gatherPlan: form.gatherPlan,
            expTime: form.expTime,
          })
        })
        const ret = await ProjectApi.saveProjectOrg(params)
        if (ret) {
          getProjectOrgList()
        }
        console.log('r', ret)
      } finally {
        addLoading.value = false
      }
    }
  })
}

const delOrg = (id: string | number) => {
  handleDelete({
    message: '确定删除该研究中心？',
    url: ProjectApi.delOrg,
    id,
    success: getProjectOrgList,
  })
}

const getProjectOrgList = () => {
  handleSearch(StationApi.queryStation, { pid })
}
getProjectOrgList()

const formatTime = (startTime: number, endTime: number) => {
  if (startTime && endTime) {
    return parseTime(startTime, '{y}-{m}-{d}') + '至' + parseTime(endTime, '{y}-{m}-{d}')
  }
  return ''
}
</script>

<style lang="scss" scoped>
.common-content {
  padding: 20px 0;
}
.common-card {
  padding: 16px;
  border: 1px solid #e5e5e5;
  background-color: #fafafa;
}
.org-member {
  margin-top: 20px;

  h4 {
    margin: 10px 0;
  }

  .common-card {
    padding: 0 0 16px;
  }

  .card-title {
    padding: 6px 16px;
    line-height: 36px;
    background-color: #fafafa;
    border-bottom: 1px solid #e5e5e5;
  }

  .total-num {
    position: relative;
    top: -4px;
    display: inline-block;
    height: 17px;
    margin-top: -5px;
    margin-left: 5px;
    line-height: 16px;
    padding: 1px 5px;
    border-radius: 50%;
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0.07);
    color: #707070;
    text-align: center;
    vertical-align: baseline;
  }
}

.member-list {
  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border: 1px solid #f0f0f0;
    font-size: 14px;
    color: #2e2e2e;
    word-break: break-word;
  }
}

.org-info {
  line-height: 1.4;
  .name {
    margin-right: 4px;
    font-weight: bold;
  }

  .time {
    font-size: 12px;
  }
}

.right-operator {
  display: flex;
  align-items: center;
}

.bold {
  font-weight: bold;
}
</style>
@/api/backend/organization
